<template>
	<view>
		<u-navbar back-text="返回" :title="title" title-width="450" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<view class="select-box">
			<view class="item">
				<view class="item-select" @click="selectTop(0)">
					<view class="select-click">
						商品
					</view>
					<view class="botton-fill" v-if="select==0">
						
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-select" @click="selectTop(1)">
					<view class="select-click select-unclick">
						评价
					</view>
					<view class="botton-fill" v-if="select==1">
						
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item-select" @click="selectTop(2)">
					<view class="select-click select-unclick">
						商家
					</view>
					<view class="botton-fill" v-if="select==2">
						
					</view>
				</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="goods-box" v-if="select==0">
			<view class="left-box">
				<scroll-view class="left-scrool" scroll-y="true"  :style="{height:scrollViewHeight+'px'}">
					<block v-for="(item,index) in leftList" :key="index">
						<view :class="[leftSelect==index?'item-click':'item']" @click="changeLeftActive(index)">
							钉子
						</view>
					</block>
					<view class="left-fill">
						
					</view>
				</scroll-view>
			</view>
			<view class="right-box">
				<scroll-view class="right-scrool" scroll-y="true"  :style="{height:scrollViewHeight+'px'}">
					<view>
						<block v-for="(item,index) in goodsList" :key="index">
							<good-item :margin="30"></good-item>
						</block>
					</view>
					<view class="right-fill">
						
					</view>
				</scroll-view>
				<cart></cart>
			</view>
		</view>
		<!-- 商品 -->
		<!-- 评价 -->
		<view class="comment-box" v-if="select==1">
			<view class="common-item">
				<view class="title">
					<view class="left-box">
						<view class="left-head">
							<image src="../../../static/images/develop/headimg.png" mode=""></image>
						</view>
						<view class="left-text">
							<text>
								王建国
							</text>
							<view class="grade-box">
								<block v-for="index in 5" :key="index">
									<image src="../../../static/images/common/grade-icon.png" mode=""></image>
								</block>
							</view>
						</view>
					</view>
					<view class="right-text">
						2020.02.02
					</view>
				</view>
				<view class="common-box">
					<view class="left-fill">
						
					</view>
					<view class="common-text">
						宝贝收到了，卖家发货很快，物流也非常给力,客服服务态度极好，很有耐心、给人一种亲切感，好喜欢。还有包装精美，高端大气上档次;看得出来商家很用心。宝贝真心不错，与图片相符，没有任何差异，真的是物超所值。
					</view>
				</view>
			</view>
		</view>
		<!-- 评价 -->
		<!-- 商家 -->
		<view class="store-info" v-if="select==2">
			<view class="info-box">
				<view class="info-item">
					<view class="left">
						<text>商家:</text>华新建材门市有限公司
					</view>
					<view class="right">
						
					</view>
				</view>
				<view class="info-item">
					<view class="left">
						<text>地址:</text>四川省成都市高新区
					</view>
					<view class="address-right">
						<image src="../../../static/images/home/location.png" mode=""></image>
					</view>
				</view>
				<view class="info-item">
					<view class="left">
						<text>电话:</text>028-2323233
					</view>
					<view class="phone-right">
						<image src="../../../static/images/buildingmaterials/phone.png" mode=""></image>
					</view>
				</view>
				<view class="info-item">
					<view class="left">
						<text>微信:</text>huaxinjiancai
					</view>
					<view class="wechart-right">
						<image src="../../../static/images/buildingmaterials/wechart.png" mode=""></image>
					</view>
				</view>
				<view class="info-item">
					<view class="left">
						<text>QQ:</text>564845
					</view>
					<view class="qq-right">
						<image src="../../../static/images/buildingmaterials/qq-icon.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="store-footer" v-if="select==2">
			<view class="title">
				公司环境
			</view>
			<view class="img-box">
				<image src="../../../static/images/develop/goods.png" mode=""></image>
				<image src="../../../static/images/develop/goods.png" mode=""></image>
				<image src="../../../static/images/develop/goods.png" mode=""></image>
			</view>
		</view>
		<!-- 商家 -->
	</view>
</template>

<script>
	export default{
		data(){
			return{
				select:0,
				scrollViewHeight:0,
				leftSelect:0,
				leftList:[1,2,3,45,6,6,7,8,1,1,1,2,2,1],
				goodsList:[1,2,3,4,56,6,7,8,9],
				title:''
			}
		},
		onShow() {
			this.scrollViewHeight = uni.getSystemInfoSync().windowHeight - 90 - this.StatusBar;
		},
		onLoad(opt) {
			this.title = opt.title
		},
		methods:{
			selectTop(index){
				this.select = index
			},
			changeLeftActive(index){
				this.leftSelect = index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.select-box {
		width: 100%;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid rgba(223, 223, 223, 1);
		.item{
			position: relative;
			.item-select {
				width: 250rpx;
				text-align: center;
				line-height: 90rpx;
				
				.select-click {
					font-size: 28rpx;
					font-weight: bold;
					color: rgba(51, 51, 51, 1);
					opacity: 1;
				}
				
				.select-unclick {
					font-size: 28rpx;
					font-weight: normal;
					color: rgba(51, 51, 51, 1);
					opacity: 1;
				}
				.botton-fill{
					position: absolute;
					width:20rpx;
					height:0px;
					border:5rpx solid rgba(228,205,112,1);
					opacity:1;
					bottom: 13rpx;
					left: 0;
					right: 0;
					margin: auto;
				}
			}
		}
	}
	.goods-box{
		display: flex;
		width: 100%;
		.left-box{
			width: 150rpx;
			.left-scrool{
				width: 150rpx;
				box-sizing: border-box;
				background: rgba(246,246,246,1);
				.item{
					line-height: 100rpx;
					width: 100%;
					text-align: center;
					font-size:24rpx;
					font-weight:400;
					color:rgba(102,102,102,1);
					opacity:1;
				}
				.item-click{
					background:rgba(255,255,255,1);
					line-height: 100rpx;
					width: 100%;
					text-align: center;
					font-size:24rpx;
					font-weight:600;
					color:rgba(51,51,51,1);
					opacity:1;
				}
				.left-fill{
					width: 100%;
					height: 180rpx;
				}
			}
		}
		.right-box{
			flex: 1;
			.right-scrool{
				padding: 30rpx 30rpx 0;
				box-sizing: border-box;
				background: rgba(255,255,255,1);
				.right-fill{
					height: 140rpx;
				}
			}
		}
	}
	.comment-box{
		padding: 30rpx;
		width: 100%;
		box-sizing: border-box;
		.common-item{
			margin-bottom: 30rpx;
			width: 100%;
			.title{
				width: 100%;
				display: flex;
				justify-content: space-between;
				.left-box{
					display: flex;
					.left-head{
						width: 80rpx;
						height: 80rpx;
						border-radius:60rpx;
						image{
							width: 80rpx;
							height: 80rpx;
							border-radius:60rpx;
						}
					}
					.left-text{
						font-size:32rpx;
						font-weight:600;
						line-height:43rpx;
						color:rgba(51,51,51,1);
						opacity:1;
						margin-left: 26rpx;
						.grade-box{
							margin-top: 16rpx;
							display: flex;
							image{
								width: 24rpx;
								height: 24rpx;
								margin-right: 12rpx;
							}
						}
					}
				}
				.right-text{
					font-size:24rpx;
					font-weight:400;
					line-height:32rpx;
					color:rgba(153,153,153,1);
					opacity:1;
				}
			}
			.common-box{
				margin-top: 30rpx;
				display: flex;
				justify-content: space-between;
				.left-fill{
					width: 80rpx;
					height: 1rpx;
				}
				.common-text{
					margin-left: 80rpx;
					font-size:24rpx;
					font-weight:400;
					line-height:36rpx;
					color:rgba(51,51,51,1);
					opacity:1;
				}
			}
		}
	}
	.store-info{
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		.info-item{
			width: 100%;
			display: flex;
			line-height: 108rpx;
			border-bottom: 1rpx solid rgba(223,223,223,1);
			justify-content: space-between;
			font-size:32rpx;
			font-weight:400;
			color:rgba(102,102,102,1);
			opacity:1;
			.left{
				text{
					display: inline-block;
					margin-right: 20rpx;
				}
			}
			.address-right{
				margin-top: 10rpx;
				width: 38rpx;
				height: 44rpx;
				image{
					width: 38rpx;
					height: 44rpx;
				}
			}
			.phone-right{
				width: 44rpx;
				height: 44rpx;
				margin-top: 10rpx;
				image{
					width: 44rpx;
					height: 44rpx;
				}
			}
			.wechart-right{
				width: 40rpx;
				height: 46rpx;
				margin-top: 10rpx;
				image{
					width: 40rpx;
					height: 46rpx;
				}
			}
			.qq-right{
				width: 46rpx;
				height: 42rpx;
				margin-top: 14rpx;
				image{
					width: 46rpx;
					height: 42rpx;
				}
			}
		}
	}
	.store-footer{
		border-top: 10rpx solid rgba(245,245,245,1);
		padding: 30rpx;
		box-sizing: border-box;
		.title{
			font-size:28rpx;
			font-weight:600;
			line-height:37rpx;
			color:rgba(51,51,51,1);
			opacity:1;
		}
		.img-box{
			margin-top: 30rpx;
			display: flex;
			justify-content: space-between;
			image{
				width: 210rpx;
				height: 160rpx;
			}
		}
	}
</style>
